<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main02.css">

</head>

<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01">
            <label>职位：</label>
            <input type="text" id="input02">
            <label>公司名称：</label>
            <input type="text" id="input03">
            <label>手机：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>风格：</label>
            <select id="input07">
                <option value="0" class="fg1">风格一</option>
                <option value="1" class="fg2">风格二</option>
                <option value="2" class="fg3">风格三</option>
            </select>
            <input type="button" value="设 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">张大山<em>产品经理</em></div>
                <div class="p02">
                    <p class="company">银河科技信息技术有限公司</p>
                    <p>手机：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中关村银河大厦B座2603</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 获取事件
        // 输入
        var usem = document.querySelector('#input01');
        var zhiwei = document.querySelector('#input02');
        var gongsi = document.querySelector('#input03');
        var shouji = document.querySelector('#input04');
        var email = document.querySelector('#input05');
        var dizhi = document.querySelector('#input06');
        // 按钮
        var btn = document.querySelector('#setcard');
        // 输出
        var p01 = document.querySelector('.p01');
        var p02 = document.querySelector('.p02');
        var cardWrap = document.querySelector('#card_wrap');
        // console.log(cardWrap);
        // 事件类型
        // 按钮点击,提交内容到p01 p02
        btn.addEventListener('click', function () {
            //判断输入框是否输入内容,并执行相应代码
            if (usem.value == '' || zhiwei.value == '' || gongsi.value == '' || shouji.value == '' || email.value == '' || dizhi.value == '') {
                alert('请输入内容');
                return;
            } else {
                var str = `  <div class="p01">${usem.value}<em>${zhiwei.value}</em> </div>
                 <div class="p02"> <p>${gongsi.value}</p> <p>${shouji.value}</p><p>${email.value}</p><p>${dizhi.value}</p></div> `;
                cardWrap.innerHTML = str;
            }
            // 风格选择
            var input07 = document.querySelector('#input07');
            // 判断input07的value,并执行相应代码(样式)
            if (input07.value == 0) {
                cardWrap.className = 'idcard01';
            } else if (input07.value == 1) {
                cardWrap.className = 'idcard02';
                // console.log(2);
            } else {
                cardWrap.className = 'idcard03';
                // console.log(1);
            }
        })
    </script>
</body>

</html>